<template>
	<el-card>
		<h2>{{ title }}</h2>
		<div id="staff_position" style="width: 100%; height: 40vh"></div>
	</el-card>
</template>

<style scoped></style>

<script setup lang="ts" name="trendStaffPositionIndex">
import * as echarts from 'echarts'
import { ref } from 'vue'

const title=ref('职位类别员工人数')
const option = {
	title: {
		left: '32px',
		text: '',
		subtext: '单位（人）',
		subtextStyle: {
			height: 20
		}
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		data: ['类别1', '类别2', '类别3', '类别4', '类别5', '类别6']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			data: [50, 550, 430, 280, 110, 50],
			type: 'bar',
			barWidth: '25%',
			itemStyle: {
				borderRadius: [4, 4, 0, 0]
			},
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: '#00000066'
				}
			}
		}
	]
}

setTimeout(function () {
	const chart = echarts.init(document.getElementById('staff_position'))
	chart.setOption(option)
}, 500)
</script>
